<template>
	<view class="container page-background">
		<user-item :name="user.name" :signStatus="user.signStatus" :avatar="user.avatar"></user-item>
		<statistics
			:item="[{ name: '项目A', number: '123' },{ name: '项目B', number: '456' },{ name: '项目C', number: '789' },{ name: '项目D', number: '012' }]">
		</statistics>
		<view class="function-main">
			<view class="item" @click="order_onclick">
				<image class="pic" src="https://peixin.peiyu.online/xmk/images/挂账.svg" mode="heightFix"></image>
				<text class="txt">订单</text>
			</view>
			<view class="item" @click="Statistics_onclick">
				<image class="pic" src="https://peixin.peiyu.online/xmk/images/收支.svg" mode="heightFix"></image>
				<text class="txt">收支</text>
			</view>
			<view class="item">
				<image class="pic" src="https://peixin.peiyu.online/xmk/images/主功能/消息.png" mode="heightFix"></image>
				<text class="txt">消息</text>
			</view>
			<view class="item">
				<image class="pic" src="https://peixin.peiyu.online/xmk/images/主功能/其他.png" mode="heightFix"></image>
				<text class="txt">其他</text>
			</view>
		</view>
		<function-second></function-second>
	</view>
</template>

<script setup>
	import {
		ref,
		onMounted
	} from 'vue';
	import {
		onLoad
	} from "@dcloudio/uni-app"


	// 当前用户的信息
	const user = ref({
		name: "财务关公",
		signStatus: "工作中",
		avatar: "../../static/images/施工主管头像.png"
	})


	// const order_onclick = () => {
	// 	uni.navigateTo({
	// 		url: "/pages/financialman/orderList/orderList"
	// 	});
	// }

	const Statistics_onclick = () => {
		uni.navigateTo({
			url: "/pages/financialman/index/statistics/statistics"
		});
	}
</script>

<style lang="scss" scoped>
	.container {
		display: flex;
		flex-direction: column;
		align-items: center;

		.function-main {
			margin-top: 30rpx;
			width: 750rpx;
			height: auto;
			padding: 0 25rpx;
			background: white;
			display: flex;
			justify-content: left;
			align-items: center;
			column-gap: 100rpx;
			// flex-wrap: wrap;

			.item {
				width: 100rpx;
				height: 100rpx;
				margin: 20rpx 0;
				display: flex;
				flex-direction: column;
				justify-content: space-between;
				align-items: center;

				.pic {
					// width: 36rpx;
					height: 40rpx;
				}

				.txt {
					font-family: Alibaba_PuHuiTi_Regular;
					font-weight: 300;
					font-size: 24rpx;
					color: $font-primary-color;
				}
			}
		}
	}
</style>